<template>
  <div style="position: relative;z-index: 100">
    <transition>
      <div v-if="isShowPopUp" class="cjy-mask" @click="hidePopUp">

      </div>
    </transition>
    <div ref="outerBox" class="cjy-outerBox" style="height:0;overflow-y:auto;overflow-scrolling: touch">
      <div ref="innerBox" style="position: relative;top:0">
        <slot>

        </slot>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        isShowPopUp: false,
        childHeight: 0,
        clientHeight: 667,
        overEnter: false
      }
    },
    components: {},
    props: {
      heights: {
        type: Number,
        default: 0,
      },
      maxHeight: {
        type: Number,
        default: 0.7,
      }
    },
    methods: {
      showPopUp() {
        this.isShowPopUp = true
        this.popUpEnter()
      },
      hidePopUp() {
        this.isShowPopUp = false
        this.$emit('close')
        this.popUpLeave()
      },
      popUpEnter() {
        this.$nextTick(() => {
          var el = this.$refs.outerBox
          el.style.height = Math.min(this.modelHeight, this.maxHeight * this.clientHeight) + 'px'
          setTimeout(() => {
            this.overEnter = true
          }, 1000)
        })

      },
      popUpLeave() {
        var el = this.$refs.outerBox
        el.style.height = 0
      },
    },
    computed: {
      modelHeight() {
        var height = this.heights
        var childHeight = this.childHeight
        return height || childHeight
      },

    },
    watch: {
      isShowPopUp(data) {
        if (data) {
          this.popUpEnter()
        } else {
          this.popUpLeave()
        }
      }
    },
    updated() {
      this.$nextTick(() => {
        var innerBox = this.$refs.innerBox
        this.childHeight = innerBox ? innerBox.offsetHeight : 0
      })
    },
    mounted() {
      this.$nextTick(() => {


        this.clientHeight = document.body.clientHeight
        var innerBox = this.$refs.innerBox
        this.childHeight = innerBox ? innerBox.offsetHeight : 0
      })
    }
  }
</script>

<style>
  .cjy-mask {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
  }

  .cjy-outerBox {
    position: absolute;
    -webkit-overflow-scrolling: touch;
    top: 0;
    transition: 0.2s;
    overflow-x: hidden;
    width: 100%;
  }
</style>
